{extend name='admin@main'}
{block name="content"}
<div class="think-box-shadow">
    {include file='user/search_distribution'}
    <div class="margin-bottom-15">付费等级分布</div>
    {notempty name='list'}
    <div class="layui-row layui-col-space14">
    <table class="layui-table margin-top-10" lay-skin="line" style="width: 50%;float: left;">
        <thead>
        <tr>
            <th class='text-left'>等级</th>
            <th class='text-left'>充值人数</th>
            <th class='text-left'>充值次数</th>
            <th class='text-left'>充值金额</th>
            <th class='text-left'>金额占比(%)</th>
        </tr>
        </thead>
        <tbody>
        {foreach $list as $key=>$vo}
            <tr>
                <td>
                    {$trade_level[$vo['level_dist']]}
                </td>
                <td>
                    {$vo.level_num}
                </td>
                <td>
                    {$vo.level_count}
                </td>
                <td>
                    {$vo.level_amount}
                </td>
                <td>
                    {$vo.level_rate*100}
                </td>
            </tr>
        {/foreach}
        </tbody>
    </table>
        <div id="trade_level" style="height:450px;width:50%;float: right" >
        </div>
    </div>
    {else/}
    <span class="notdata">没有记录哦</span>
    {/notempty}

    <div class="margin-bottom-15">付费额度分布</div>
    {notempty name='list2'}
    <div class="layui-row layui-col-space14">
        <table class="layui-table margin-top-10" lay-skin="line" style="width: 50%;float: left;">
            <thead>
            <tr>
                <th class='text-left'>额度(元)</th>
                <th class='text-left'>充值人数</th>
                <th class='text-left'>充值次数</th>
                <th class='text-left'>充值金额</th>
                <th class='text-left'>金额占比(%)</th>
            </tr>
            </thead>
            <tbody>
            {foreach $list2 as $key=>$vo}
            <tr>
                <td>
                    {$trade_amount[$vo['amount_dist']]}
                </td>
                <td>
                    {$vo.amount_num}
                </td>
                <td>
                    {$vo.amount_count}
                </td>
                <td>
                    {$vo.all_amount}
                </td>
                <td>
                    {$vo.amount_rate*100}
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
        <div id="trade_amount" style="height:450px;width:50%;float: right" >
        </div>
    </div>
    {else/}
    <span class="notdata">没有记录哦</span>
    {/notempty}

    <div class="margin-bottom-15">付费倍率分布</div>
    {notempty name='list3'}
    <div class="layui-row layui-col-space14">
        <table class="layui-table margin-top-10" lay-skin="line" style="width: 50%;float: left;">
            <thead>
            <tr>
                <th class='text-left'>倍率</th>
                <th class='text-left'>充值人数</th>
                <th class='text-left'>充值次数</th>
                <th class='text-left'>充值金额</th>
                <th class='text-left'>金额占比(%)</th>
            </tr>
            </thead>
            <tbody>
            {foreach $list3 as $key=>$vo}
            <tr>
                <td>
                    {$trade_cannon[$vo['cannon_dist']]}
                </td>
                <td>
                    {$vo.cannon_num}
                </td>
                <td>
                    {$vo.cannon_count}
                </td>
                <td>
                    {$vo.cannon_amount}
                </td>
                <td>
                    {$vo.cannon_rate*100}
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
        <div id="trade_cannon" style="height:450px;width:50%;float: right" >
        </div>
    </div>
    {else/}
    <span class="notdata">没有记录哦</span>
    {/notempty}
</div>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('trade_level'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {d}%"
            },

            series : [
                {
                    name: '等级分布',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    data :eval('{:json_encode($amount_rate)}'),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);

        chart2 = echarts.init(document.getElementById('trade_amount'));
        option2 = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {d}%"
            },
            series : [
                {
                    name: '额度分布',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    data :eval('{:json_encode($amount_rate2)}'),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart2.setOption(option2);

        chart3 = echarts.init(document.getElementById('trade_cannon'));
        option3 = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {d}%"
            },
            series : [
                {
                    name: '倍率分布',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    data :eval('{:json_encode($amount_rate3)}'),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart3.setOption(option3);
    });
</script>=
{/block}
